<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="plugins/Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <!-- css pie chart -->
    <link href="plugins/easy-pie-chart/style.css" rel="stylesheet" />    
    <!-- font awesome -->
    <link href="plugins/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!-- Vertical Timeline Resource style -->
	<link rel="stylesheet" href="plugins/vertical-timeline/css/style.css" />
    <!-- nav one page style -->
    <link rel="stylesheet" type="text/css" href="plugins/One-Page-Nav/nav-one-page.css" />
    <!-- wow plugin -->
    <link rel="stylesheet" href="plugins/WOW/css/libs/animate.css" />
    <!-- custom css -->
    <link href="css/style.css" rel="stylesheet" />
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
        <!-- navigation fix top -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-header-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">My Resume</a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-header-collapse">
              <ul class="nav navbar-nav">
                <li><a href="#header" class="current">Home</a></li>
                <li><a href="#about-me">About me</a></li>
                <li><a href="#education">Education</a></li>
                <li><a href="#skill">Skills</a></li>
                <li><a href="#experience">Experience</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>        
        <!-- end navigation top -->

        <!-- Hear -->
        <div id="header" >
            <div class="container header">
                <h1 class="circle-header wow fadeInDown animated">
                    Shaha Carolina
                </h1>
                <p class="des-header wow slideInRight" >An ineractive web designer with the passion of creativity</p>
                <a href="#about-me" class="scroll-top" >
                    <i class="fa fa-arrow-circle-down fa-4x wow pulse animated"  data-wow-iteration="infinite" data-wow-duration="2s"></i>
                </a>                                  
            </div>                          
        </div>
        <!-- end header -->
        
        <!-- about me -->
        <div id="about-me">
            <div class="container">
                <h3 class="title-header">
                    <span>About me</span>
                </h3>
                <div class="row">
                    <div class="col-md-5 wow rollIn animated" >
                    <!-- show avatar -->
                    <img src="images/avatar.jpg" width="400" class="img-circle" />
                    <!-- end show avatar -->
                    </div>
                    <div class="col-md-7">
                        <div class="about-section-1 wow slideInRight" >
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                                It has survived not only five centuries
                            </p>
                            <p>
                                but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            </p>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                                It has survived not only five centuries
                            </p>
                            <p>
                                but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            </p>                        
                        </div>
                        <div class="about-section-2">
                          <ul class="social-icon">
                            <li class="wow rollIn animated" data-wow-delay="0.5s"><a href="#" class="social-facebook"><i class="fa fa-facebook"></i></a></li>
                            <li class="wow rollIn animated" data-wow-delay="0.5s"><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li class="wow rollIn animated" data-wow-delay="0.5s"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li class="wow rollIn animated" data-wow-delay="0.5s"><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li class="wow rollIn animated" data-wow-delay="0.5s"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            <li class="wow rollIn animated" data-wow-delay="0.5s"><a href="#"><i class="fa fa-rss"></i></a></li>
                          </ul>                          
                        </div>
                        <div class="about-section-3 wow slideInRight" data-wow-delay="1s">
                            <!-- button download CV -->
                            <a class="btn btn-default button-about"><i class="fa fa-folder-open-o"></i> Download CV</a>
                            <a href="#contact" class="btn btn-default button-about scroll-top"><i class="fa fa-envelope-o"></i> Contact me</a>
                        </div>
                    </div>
                </div>
            </div>        
        </div>
        <!-- end about me -->
        
        <!-- education -->
        <div id="education">
            <div class="container">
                <h3 class="title-header">
                    <span>Education</span>
                </h3>
            	<section id="cd-timeline" class="cd-container">
            		<div class="cd-timeline-block wow fadeInLeft animated" data-wow-delay="0.8s" >
            			<div class="cd-timeline-img cd-picture">
            				<i class="fa fa-graduation-cap fa-2x"></i>
            			</div> <!-- cd-timeline-img -->
            
            			<div class="cd-timeline-content">
            				<h2>Title of section 1</h2>
            				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
            				<a href="#0" class="cd-read-more">Read more</a>
            				<span class="cd-date">Jan 14</span>
            			</div> <!-- cd-timeline-content -->
            		</div> <!-- cd-timeline-block -->
            
            		<div class="cd-timeline-block wow fadeInRight animated" data-wow-delay="0.8s" >
            			<div class="cd-timeline-img cd-movie">
            				<i class="fa fa-graduation-cap fa-2x"></i>
            			</div> <!-- cd-timeline-img -->
            
            			<div class="cd-timeline-content wow fadeInLeft animated" data-wow-delay="0.8s" >
            				<h2>Title of section 2</h2>
            				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
            				<a href="#0" class="cd-read-more">Read more</a>
            				<span class="cd-date">Jan 18</span>
            			</div> <!-- cd-timeline-content -->
            		</div> <!-- cd-timeline-block -->
            
            		<div class="cd-timeline-block wow fadeInRight animated" data-wow-delay="0.8s" >
            			<div class="cd-timeline-img cd-picture">
            				<i class="fa fa-graduation-cap fa-2x"></i>
            			</div> <!-- cd-timeline-img -->
            
            			<div class="cd-timeline-content">
            				<h2>Title of section 3</h2>
            				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
            				<a href="#0" class="cd-read-more">Read more</a>
            				<span class="cd-date">Jan 24</span>
            			</div> <!-- cd-timeline-content -->
            		</div> <!-- cd-timeline-block -->
            
            		<div class="cd-timeline-block wow fadeInLeft animated" data-wow-delay="0.8s" >
            			<div class="cd-timeline-img cd-location">
            				<i class="fa fa-graduation-cap fa-2x"></i>
            			</div> <!-- cd-timeline-img -->
            
            			<div class="cd-timeline-content">
            				<h2>Title of section 4</h2>
            				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
            				<a href="#0" class="cd-read-more">Read more</a>
            				<span class="cd-date">Feb 14</span>
            			</div> <!-- cd-timeline-content -->
            		</div> <!-- cd-timeline-block -->
            	</section> <!-- cd-timeline -->                
            </div>
        </div>
        <!-- end educate -->
        
        <!-- Skill -->
        <div id="skill">
            <div class="container">
                <h3 class="title-header" >
                    <span>Skill</span>
                </h3>
                <div class="row wow bounceInUp center animated">
                    <div class="col-xs-6 col-sm-4 col-md-2 skills-chart">
                    	<span class="chart" data-percent="90">
                    		<span class="percent">90%</span>
                    	</span>
                    	<span class="bottom">Photoshop</span>                    
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-2 skills-chart">
                    	<span class="chart" data-percent="86">
                    		<span class="percent">86%</span>
                    	</span>
                    	<span class="bottom">Illustrator</span>                    
                    </div>                    
                    <div class="col-xs-6 col-sm-4 col-md-2 skills-chart">
                    	<span class="chart" data-percent="80">
                    		<span class="percent">80%</span>
                    	</span>
                    	<span class="bottom">Html & Css</span>                    
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-2 skills-chart">
                    	<span class="chart" data-percent="95">
                    		<span class="percent">95%</span>
                    	</span>
                    	<span class="bottom">Javascript</span>                    
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-2 skills-chart">
                    	<span class="chart" data-percent="90">
                    		<span class="percent">90%</span>
                    	</span>
                    	<span class="bottom">Php</span>                    
                    </div>
                    <div class="col-xs-6 col-sm-4 col-md-2 skills-chart">
                    	<span class="chart" data-percent="80">
                    		<span class="percent">80%</span>
                    	</span>
                    	<span class="bottom">Mysql</span>                    
                    </div>                                                                                                                      
                </div>
            </div>
        </div>
        <!-- end skill -->
        
        <!-- Experience -->
        <div id="experience">
            <div class="container">
                <h3 class="title-header" >
                    <span>Experience</span>
                </h3>
                <div class="row">
                    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
                        	<!-- Carousel indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                                <li data-target="#myCarousel" data-slide-to="3"></li>
                            </ol>   
                           <!-- Carousel items -->
                            <div class="carousel-inner">
                                <div class="active item">
                                    <div class="quote-separator">
                                        <i class="fa fa-quote-right fa-3x"></i>
                                    </div>
                                    <div class="carousel-caption">
                                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </p>
                                      <h3>Richard McClintock</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="quote-separator">
                                        <i class="fa fa-quote-right fa-3x"></i>
                                    </div>
                                    <div class="carousel-caption">
                                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </p>
                                      <h3>Finibus Bonorum et Malorum</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="quote-separator">
                                        <i class="fa fa-quote-right fa-3x"></i>
                                    </div>
                                    <div class="carousel-caption">
                                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </p>
                                      <h3>Cicero in 45 BC</h3>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="quote-separator">
                                        <i class="fa fa-quote-right fa-3x"></i>
                                    </div>
                                    <div class="carousel-caption">
                                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </p>
                                      <h3>Cicero in 45 BC</h3>
                                    </div>
                                </div>                                                                                                
                            </div>
                     </div>          
                </div>                                   
            </div>
        </div>
        <!-- end Experience -->
        
        <!-- Projects -->
        <div id="projects">
            <div class="container">
                <h3 class="title-header">
                    <span>Projects</span>
                </h3>
                <div class="row">
                    <div class="container">
                        <ul class="menu-project">
                            <li class="selected"><a rel="all">All</a></li>
                            <li><a rel="photoshop">Photoshop</a></li>
                            <li><a rel="illustrator">Illustrator</a></li>
                            <li><a rel="html-css">Html & Css</a></li>
                        </ul>
                        <ul class="project-items wow fadeInUp animated" data-wow-delay="1s" >
                            <div class="col-md-3" rel="photoshop" ><img src="images/projects/vector-image-of-crystal-display-with-arrow-sign-and-currency-sign.jpg" class="img-responsive"  /></div>
                            <div class="col-md-3" rel="html-css" ><img src="images/projects/vector-art-icon-buttons.jpg" class="img-responsive" /></div>
                            <div class="col-md-3" rel="photoshop" ><img src="images/projects/two-heads-with-mechanisms-vector.jpg" class="img-responsive" /></div>
                            <div class="col-md-3" rel="illustrator" ><img src="images/projects/stamp.jpg" class="img-responsive" /></div>
                            <div class="col-md-3" rel="html-css" ><img src="images/projects/news-in-mobile-phone.jpg" class="img-responsive" /></div>
                            <div class="col-md-3" rel="photoshop" ><img src="images/projects/megaphone-vector.jpg" class="img-responsive" /></div>                        
                            <div class="col-md-3" rel="illustrator" ><img src="images/projects/man-using-tablet-computer.jpg" class="img-responsive" /></div>
                            <div class="col-md-3" rel="html-css" ><img src="images/projects/diverse-group-of-businesspersons.jpg" class="img-responsive" /></div>
                        </ul>                    
                    </div>
                </div>                                  
            </div>
        </div>
        <!-- end Projects -->        
        <!-- Contact -->
        <div id="contact">
            <div class="container">
                <h3 class="title-header">
                    <span>Contact</span>
                </h3>                
                <div class="row">
                    <div class="col-md-6 wow slideInLeft"><!-- form contact -->
                        <form role="form">
                            <div class="form-group">
                                <input type="text" class="form-control" id="name" placeholder="Enter name" />
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" id="email" placeholder="Enter email" />
                            </div>                          
                            <div class="form-group">
                                <textarea class="form-control" rows="5" id="message" placeholder="Enter message"></textarea>
                            </div>
                            <div class="form-group"> 
                                <button type="submit" class="btn btn-default">Submit</button>
                            </div>                                                                                                              
                        </form>
                    </div>
                    <div class="col-md-6"><!-- items address -->
                        <p class="address-item wow slideInRight">
        					<span class="icon"><i class="fa fa-map-marker"></i></span>
        					795 Ramkhamheng 24 Rd, Huamark, Bangkapi, Bangkok 10250, Thailand
        				</p>
                        <p class="address-item wow slideInRight">
        					<span class="icon"><i class="glyphicon glyphicon-earphone"></i></span>
        					Phone: +66-85-453-4353 <br>
        					Fax: +66-2-545-6848 <br>
        				</p>
                        <p class="address-item wow slideInRight">
        					<span class="icon"><i class="fa fa-envelope"></i></span>
        					Support: <a href="mailto:dowebstation@gamil.com">crenoveative@gamil.com</a> <br>
        					Booking: <a href="mailto:dowebstation@gamil.com">crenoveative@gamil.com</a>
        				</p>
                        <p class="address-item wow slideInRight">
        					<span class="icon"><i class="fa fa-globe"></i></span>
        					Support: <a href="#">www.crenoveative.com</a> <br>
        				</p>                                                                                     
                    </div>
                </div>
            </div>
        </div>
        <!--div id="contact-map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d387144.03635795997!2d-73.97967999999996!3d40.70562585!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1svi!2s!4v1416732890916" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
        </div-->
        <!-- end contact -->
        
        <!-- footer -->
        <footer class="footer">
            <div class="container">
                <p class="footer-social">
                    <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
                    <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
                    <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
                    <a href="#"><i class="fa fa-dribbble fa-2x"></i></a>
                    <a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
                    <a href="#"><i class="fa fa-rss fa-2x"></i></a>
                </p>
                <p class="text-muted">Copyright &COPY; 2014 Landing Page CV Template. All right reserved.</p>
            </div>
        </footer>
        <!-- end footer -->
        
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>       
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>        
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="plugins/Bootstrap/js/bootstrap.js"></script>
    <!-- One Page Nav jquery -->
    <script type="text/javascript" src="plugins/One-Page-Nav/jquery.nav.js"></script>
    <!-- wow jquery -->
    <script src="plugins/WOW/dist/wow.min.js"></script>
    <!-- jquery waypoints -->
    <script src="plugins/jquery-waypoints/waypoints.min.js"></script>
    <!-- jquery Scroll To Fixed -->
    <script src="plugins/ScrollToFixed/jquery-scrolltofixed.js"></script>    
    <!-- custom js -->
    <script src="js/custom.js"></script>     
  </body>
</html>